<template>
	<div class="view">
		<!-- 头部 -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-20 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_title">新增内容</div>
		</div>
		<!-- 头部 end -->

		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{ height: height + 'px' }">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="通用信息" name="first">
						<div class="form-con">
							<el-form label-width="100px" :model="form" ref="form">
								<el-form-item label="文档标题:" prop="title" :rules="[{
									required: true,
									message: '请输入目录名称',
									trigger: 'blur'
								}]">
									<div class="form-title" style="display: flex;">
										<el-input placeholder="请输入" v-model="form.title"
											style="width: 400px;margin-right: 30px;">
										</el-input>
										<!-- <el-color-picker v-model="form.tcolor" show-alpha></el-color-picker> -->
									</div>
								</el-form-item>
								<el-form-item label="分类:" prop="cataid" :rules="[{
									required: true,
									message: '请选择分类',
									trigger: 'blur'
								}]">
									<el-select v-model="form.cataid" placeholder="请选择"  style="width: 400px;">
										<el-option v-for="item in sort_list" :key="item.id" :label="item.sort" :value="item.id"></el-option>
									</el-select>
								</el-form-item>
								<div class="form-item">
									<el-form-item label="简介:">
										<el-input type="textarea" :row="5" placeholder="请输入" v-model="form.brief" style="width: 400px;">
										</el-input>
									</el-form-item>
									<!-- <el-form-item label="角标:">
										<el-input placeholder="请输入" v-model="form.cornertitle" style="width: 150px;">
										</el-input>
									</el-form-item> -->
								</div>
								<el-form-item label="文档设置:">
									<el-checkbox v-model="form.isHot" :true-label="1" :false-label="0">推荐</el-checkbox>
									<!-- <el-checkbox v-model="form.isOne" :true-label="1" :false-label="0">头条</el-checkbox> -->
									<!-- <el-checkbox v-model="form.isHead" :true-label="1" :false-label="0">置顶</el-checkbox> -->
									<el-checkbox v-model="form.isHidden" :true-label="1" :false-label="0">隐藏</el-checkbox>
									<!-- <el-checkbox v-model="form.isOnly" :true-label="1" :false-label="0">唯一</el-checkbox> -->
									<!-- <el-checkbox v-model="form.isBold" :true-label="1" :false-label="0">加粗</el-checkbox> -->
									<!-- <el-checkbox v-model="form.isGun" :true-label="1" :false-label="0">轮播</el-checkbox> -->
									<!-- <el-checkbox v-model="form.isIndex" :true-label="1" :false-label="0">首页</el-checkbox> -->
								</el-form-item>
								<!-- <div class="form-item">
									<el-form-item label="作者:">
										<el-input placeholder="请输入" v-model="form.author" style="width: 150px;">
										</el-input>
									</el-form-item>
									<el-form-item label="来源:">
										<el-input placeholder="请输入" v-model="form.source" style="width: 150px;">
										</el-input>
									</el-form-item>
									<el-form-item label="来源网址:">
										<el-input placeholder="请输入" v-model="form.sourceurl" style="width: 200px;">
										</el-input>
									</el-form-item>
								</div> -->
								<el-form-item label="跳转网址:">
									<el-input size="small" style="width: 400px;" placeholder="请输入"
										v-model="form.url"></el-input>
								</el-form-item>
								<!-- <el-form-item label="资源文件:">
									<el-input size="small" style="width: 300px;" v-model="form.dataurlFname"
										placeholder="请选择" readonly></el-input>
									<el-button size="medium" type="primary" @click="$refs.file.click()">上传文件</el-button>
									<input type="file" ref="file" style="position: fixed;z-index: -1;opacity: 0;"
										@change="fileChange">
								</el-form-item> -->
								<!-- <el-form-item label="封面图:" style="margin-right: 20px;">
									<div @click="uploadPicture('flagImg', '1')" v-if="form.picdirIndex == ''">
										<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false"
											:limit="1" :disabled="true">
											<i slot="default" class="el-icon-plus"></i>
											<div slot="file" slot-scope="{file}">
												<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdirIndex" alt="">
											</div>
										</el-upload>
									</div>
									<div class="img_box" v-else @click="uploadPicture('flagImg', '1')">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdirIndex" alt="">
										<div class="img_tip">
											<div class="img_big" @click.stop="imgBig('1')">
												<i class="el-icon-zoom-in"></i>
											</div>
											<div class="img_remove" @click.stop="imgRemove('1')">
												<i class="el-icon-delete"></i>
											</div>
										</div>
									</div>
								</el-form-item> -->
								<!-- <el-form-item label="封面图(列表页):" style="margin-right: 20px;">
									<div @click="uploadPicture('flagImg', '2')" v-if="form.picdirList == ''">
										<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false"
											:limit="1" :disabled="true">
											<i slot="default" class="el-icon-plus"></i>
											<div slot="file" slot-scope="{file}">
												<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdirList" alt="">
											</div>
										</el-upload>
									</div>
									<div class="img_box" v-else @click="uploadPicture('flagImg', '2')">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdirList" alt="">
										<div class="img_tip">
											<div class="img_big" @click.stop="imgBig('2')">
												<i class="el-icon-zoom-in"></i>
											</div>
											<div class="img_remove" @click.stop="imgRemove('2')">
												<i class="el-icon-delete"></i>
											</div>
										</div>
									</div>
								</el-form-item> -->
								<el-form-item label="封面图:" style="margin-right: 20px;">
									<div @click="uploadPicture('flagImg', '3')" v-if="form.picdir == ''">
										<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false"
											:limit="1" :disabled="true">
											<i slot="default" class="el-icon-plus"></i>
											<div slot="file" slot-scope="{file}">
												<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdir" alt="">
											</div>
										</el-upload>
									</div>
									<div class="img_box" v-else @click="uploadPicture('flagImg', '3')">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdir" alt="">
										<div class="img_tip">
											<div class="img_big" @click.stop="imgBig('3')">
												<i class="el-icon-zoom-in"></i>
											</div>
											<div class="img_remove" @click.stop="imgRemove('3')">
												<i class="el-icon-delete"></i>
											</div>
										</div>
									</div>
								</el-form-item>
							</el-form>
						</div>
					</el-tab-pane>
					<el-tab-pane label="文档内容" name="second">
						<div class="form-con">
							<el-form label-width="100px" :model="form" ref="form">
								<el-form-item label="正文:">
									<Ueditor ref="cnt" @cntInput="(e) => { form.cnt = e }"></Ueditor>
								</el-form-item>
								<!-- <el-form-item label="简要:">
									<Ueditor ref="cntShort" @cntInput="(e) => { form.cntShort = e }"></Ueditor>
								</el-form-item>
								<el-form-item label="正文:(手机版)">
									<Ueditor ref="cntPhone" @cntInput="(e) => { form.cntPhone = e }"></Ueditor>
								</el-form-item>
								<el-form-item label="简要:(手机版)">
									<Ueditor ref="cntShortPhone" @cntInput="(e) => { form.cntShortPhone = e }"></Ueditor>
								</el-form-item> -->
							</el-form>
						</div>
					</el-tab-pane>
					<el-tab-pane label="其他信息" name="third">
						<div class="form-con">
							<el-form label-width="80px" :model="form" ref="form">
								<!-- <el-form-item label="网页标题">
									<el-input placeholder="请输入" v-model="form.webtitle" style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="关键词">
									<el-input placeholder="请输入" v-model="form.keywords" style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="网页描述">
									<el-input type="textarea" :rows="5" placeholder="请输入" v-model="form.shorts"
										style="width: 400px;">
									</el-input>
								</el-form-item> -->
								<el-form-item label="上传日期">
									<el-date-picker v-model="form.timePublish" type="date" :default-value="new Date()"
										style="width: 400px;" align="center" placeholder="选择日期时间" value-format="yyyy-MM-dd">
									</el-date-picker>
								</el-form-item>
								<el-form-item label="查看次数">
									<el-input placeholder="请输入" type="number" v-model.number="form.hitnum"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="排序权重">
									<el-input placeholder="请输入" type="number" v-model.number="form.orderid"
										style="width: 400px;">
									</el-input>
								</el-form-item>
							</el-form>
						</div>
					</el-tab-pane>
				</el-tabs>


				<div class="item_bottom">
					<el-button icon="el-icon-check" type="primary" size="medium" @click="submitForm('form')"
						:disabled="isAdd">完成,确认提交
					</el-button>
				</div>
			</div>
		</div>
		<!-- 主体部分 end -->

		<!-- 图片裁剪弹窗 -->
		<!-- <el-dialog title="裁切封面" :visible.sync="cropperModel" width="1120px" center :close-on-click-modal="false">
			<cropper-image :Name="cropperName" @uploadImgSuccess="handleUploadSuccess" ref="child" :mode="mode">
			</cropper-image>
		</el-dialog> -->

		<!--查看大封面-->
		<el-dialog title="查看大封面" :visible.sync="imgVisible" center :close-on-click-modal="false">
			<img :src="$api.imgUrl+imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>

		<!-- <input type="file" accept="image/*" style="position: absolute;z-index: -10;" ref="imgFile" @change="imgFileChange"> -->
		<FileUpload @fileChange="imgFileChange" ref="imgFile" accept="image/*"></FileUpload>

	</div>
</template>

<script>
import Ueditor from "../../components/ueditor.vue"
import CropperImage from "../../components/CropperImage.vue";
import moment from "moment"
import FileUpload from "@/components/FileUpload.vue"
export default {
	components: {
		Ueditor,
		"cropper-image": CropperImage,
		FileUpload
	},
	data() {
		return {
			height: document.documentElement.clientHeight - 105,
			sort_list: [],
			defaultprops: {
				children: 'catalogTreeVos',
				label: 'sort',
				value: 'cataid',
				checkStrictly: true,
				multiple:true
			},
			form: {
				cataid: "",			// 所属分类id
				cataname: "",		// 所属分类
				brief:"",			//简介
				cnt: "",			// 内容
				hitnum: 0,			// 点击量
				isHidden: "",		// 是否隐藏 1 是 默认为0
				isHot: "",			// 是否推荐 1 是 默认为0
				orderid: "",		// 排序id
				picdir: "",			// 详情图
				timePublish: null, 	// 发布日期
				title: "",			// 标题
				url: "",			// 跳转网址
			},

			name: this.$root.ptName,
			picdir: this.$root.ptPicdir,
			isAdd: false,
			activeName: "first",

			//裁切图片参数
			cropperModel: false,
			cropperName: '',
			imgName: '',
			imgVisible: false,
			// mode: [120, 120],
			p_index: "",
			img_upload: "",
		}
	},
	methods: {
		imgFileChange(data) {
			if (this.p_index == '1') {
				this.form.picdirIndex = data
			} else if (this.p_index == '2') {
				this.form.picdirList = data
			} else {
				this.form.picdir = data
			}
		},

		fileChange() {
			let file = this.$refs.file.files[0];
			this.form.dataurlFname = file.name;
			let param = new FormData();
			param.append("file", file)
			this.$http({
				method: 'post',
				url: this.$api.uploadFile,
				data: param
			}).then(res => {
				if (res.data) {
					this.form.dataurl = res.data;
					this.$refs.file.value = "";
				} else {
					this.$message.error("上传文件失败！")
				}
			})
		},

		// 图片删除
		imgRemove(type) {
			if (type == '1') {
				this.form.picdirIndex = ""
			} else if (type == '2') {
				this.form.picdirList = ""
			} else {
				this.form.picdir = ""
			}
		},

		// 图片放大
		imgBig(type) {
			if (type == '1') {
				this.imgName = this.form.picdirIndex
			} else if (type == '2') {
				this.imgName = this.form.picdirList
			} else {
				this.imgName = this.form.picdir
			}

			this.imgVisible = true
		},

		// 图片上传
		uploadPicture(name, p_index) {
			this.p_index = p_index
			this.$refs.imgFile.open();
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			this.cropperModel = false;
			this.cropperName = '';
			
		},

		// 返回上一页
		to_exit() {
			this.$router.go(-1)
		},

		// 加载目录列表
		data_init() {
			let that = this
			this.$http({
				'method': 'get',
				'url': this.$api.cataList
			}).then(res => {
				if (res.data.code == 20000) {
					let list = this.getTreeData(res.data.data.items)
					for (let i = 0; i < list.length; i++) {
						that.sort_list.push(list[i])
					}
					
				}
			})
		},


		// 筛选空列表
		getTreeData(data) {
			// 循环遍历json数据
			for (var i = 0; i < data.length; i++) {

				if (data[i].catalogTreeVos.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i].catalogTreeVos = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].catalogTreeVos);
				}
			}
			return data;
		},

		getCataname(){
			for (let i = 0; i < this.sort_list.length; i++) {
				const element = this.sort_list[i]['id'];
				if(element==this.form.cataid){
					return this.sort_list[i]['sort']
				}
			}
		},

		// 上传
		upload() {
			let form = this.form;
			this.$http({
				'method': 'post',
				'url': this.$api.cntAdd,
				data: { ...this.form, cataname: this.getCataname(), timePublish: this.form.timePublish + " 00:00:00" }
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message({
						message: res.data.message,
						type: 'success'
					})
					this.$router.go(-1)
				} else {
					this.$message.error(res.data.message)
				}
				this.isAdd = false
			})

		},

		// 表单验证
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.isAdd = true
					this.upload()
				}
			});
		},

		// 获取父级id
		select(e) {
			this.form.parentid = e[e.length - 1]
		},

		getOrderid() {
			this.$http({
				url: this.$api.cntOrderid
			}).then(res => {
				if (res.data.code == 20000) {
					this.form.orderid = res.data.data.orderid
				}
			})
		}

	},
	created() {
		this.getOrderid()
		this.data_init()
		let time = moment(new Date()).format("YYYY-MM-DD")
		this.form.timePublish = time
	},
}
</script>

<style scoped>
@import url("../../assets/css/sortAdd.css");

.form-con {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 30px;
}

.h_user * {
	cursor: pointer;
}

::v-deep .el-checkbox {
	margin-right: 10px;
}

::v-deep .el-checkbox__label {
	padding-left: 5px;
}

.form-item {
	display: flex;
}

.item_bottom {
	position: fixed;
	width: 96%;
	margin-left: 20px;
	bottom: 20px;
	z-index: 1098
}

.main_con {
	padding-bottom: 130px;
}
>>>#edui1_iframeholder{
	height: 500px !important;
}
</style>
